<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, watch, computed } from 'vue'

const props = defineProps<{
  visible: boolean
  title?: string
  percentage?: number
  fullscreen?: boolean
}>()

// 设置默认值
const fullscreenMode = computed(() => props.fullscreen)

// 模拟进度增长
const currentPercentage = ref(0)
let timer: number | null = null
const emit = defineEmits(['afterComplete'])

// 监听visible变化，重置进度条
const resetProgress = () => {
  if (props.visible) {
    if (props.percentage !== undefined) {
      // 如果传入了百分比，则使用传入的值
      currentPercentage.value = props.percentage
    } else {
      // 否则启动模拟进度
      startProgress()
    }
  } else {
    // 如果从可见变为不可见，先完成进度再隐藏
    if (currentPercentage.value > 0 && currentPercentage.value < 100) {
      completeProgress()
    } else {
      stopProgress()
      currentPercentage.value = 0
    }
  }
}

// 启动进度模拟
const startProgress = () => {
  stopProgress() // 先停止之前的定时器
  currentPercentage.value = 0

  // 创建新的定时器，模拟进度
  timer = window.setInterval(() => {
    if (currentPercentage.value < 90) {
      // 速度逐渐变慢
      const increment = Math.max(0.5, 5 * Math.pow(0.8, currentPercentage.value / 10))
      currentPercentage.value = Math.min(90, currentPercentage.value + increment)
    }
  }, 300)
}

// 完成进度
const completeProgress = () => {
  stopProgress()
  currentPercentage.value = 100
  
  // 停留1秒后触发完成事件
  setTimeout(() => {
    currentPercentage.value = 0
    emit('afterComplete')
  }, 1000)
}

// 停止进度模拟
const stopProgress = () => {
  if (timer !== null) {
    clearInterval(timer)
    timer = null
  }
}

// 在组件挂载时设置初始状态
onMounted(() => {
  resetProgress()
})

// 在组件卸载前清理定时器
onBeforeUnmount(() => {
  stopProgress()
})

// 监听props.visible变化
watch(() => props.visible, (_newValue: boolean) => {
  resetProgress()
}, { immediate: true })

// 监听percentage变化
watch(() => props.percentage, (newValue: number | undefined) => {
  if (newValue !== undefined) {
    currentPercentage.value = newValue
  }
})
</script>

<template>
  <div class="generate-overlay" :class="{ 'fullscreen': fullscreenMode }" v-if="visible || currentPercentage === 100">
    <div class="overlay-content">
      <el-progress type="dashboard" :percentage="props.percentage ?? currentPercentage" :stroke-width="6">
        <template #default="{ percentage }">
          <span class="progress-text">
            {{ title || 'AI正在生成' }}
            <span class="percentage">{{ Math.round(percentage) }}%</span>
          </span>
        </template>
      </el-progress>
    </div>
  </div>
</template>

<style scoped>
.generate-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1010;
  backdrop-filter: blur(2px);
  border-radius: 8px;
}

.generate-overlay.fullscreen {
  position: fixed;
  border-radius: 0;
}

.overlay-content {
  text-align: center;
}

.progress-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--el-color-primary);
  font-size: 14px;
  margin-top: 10px;
}

.percentage {
  font-size: 20px;
  font-weight: bold;
  margin-top: 5px;
}
</style> 